<template>
    <div class="container">
        <!-- 会员页面  按钮部分 -->
        <div class="handle-box">
            <el-button-group class="ml-4">
                <el-button color="#0eb394"  @click="addMember">添加会员</el-button>
                <el-button type="info"   @click="batchExport">批量导入会员</el-button>
                <!-- <el-button type="info"  @click="batchBindCard">批量绑卡</el-button> -->
            </el-button-group>
          </div>
          <el-divider></el-divider>
          <!-- 会员列表 -->
          <el-table :data="tableData" style="width: 100%" >
            <el-table-column prop="customerName" label="会员姓名(手机号)" width="180"  >
                <template #default="scope">
                        {{ scope.row.customerName }}({{scope.row.phone}})
                </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="180" />
            <el-table-column prop="clubCard" label="会员卡" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="birth" label="生日" />
            <el-table-column prop="note" label="备注" />
            <el-table-column  label="操作"  width="250">
                <template #default="scope">
                    <el-row  class="btn-opt">
                        <el-button type="primary"  size="small" @click="memberEdit(scope.row.id)" >编辑</el-button>
                        <el-button type="success" size="small" @click="memberDetail(scope.row)">详情</el-button>
                        <el-button type="danger" size="small" @click="cancelMember(scope.row.id)">注销会员</el-button>
                </el-row>
                </template>
            </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <!-- 分页组件 -->
      <el-row>
        <el-col :span="20">
            <el-pagination  v-model:current-page="pageData.pageCurrent"
            :page-size="pageData.pageSize"
             layout="prev, pager, next"   
             :total="pageData.pageTotal"
             background
            @current-change="handleCurrentChange" />
        </el-col>
         <!-- <el-col :span="4" style="font-size: 14px;">
            <span>当前 {{(pageData.pageCurrent-1)*pageData.pageSize+1}} 条到 {{ pageData.pageSize*pageData.pageCurrent }} 条 共 {{pageData.pageTotal}} 条</span>  
         </el-col> -->
        </el-row>

         <!-- 添加会员的抽屉 -->
    <el-drawer v-model="drawer"  :direction="direction" size="50%">
        <template #header>
            <h2>添加会员</h2>
        </template>
        <div class="div-step" >
            <el-steps  :active="active" finish-status="success" simple>
                <el-step title="会员信息" />
                <el-step title="绑定会员卡" />
                <el-step title="完成" />
            </el-steps>
        </div>
        <div class="div-form" >
            <!-- 添加会员的表单  -->
            <EditAddForm v-if="active == 1"  :form="form" v-model:active="active" v-model:drawer="drawer" type="add"/>
            <!-- 绑定会员卡的表单 -->
            <MemberBindForm v-else-if="active == 2" :cardForm="cardForm"  v-model:active="active" v-model:drawer="drawer"/>
            <!-- 会员注册完成 -->
            <div class="div-formFinish"   v-else>
                <span  style="line-height: 120px;">会员注册完成</span>
            </div>
      </div>
   </el-drawer>

   <!--会员编辑   抽屉出来的方式  左右ltr  右左rlt  上下ttb  下上 btt  size设置抽屉占浏览器款的的50%-->
    <el-drawer  v-model="editMemberDrawer"  direction="rtl" size="50%">
     <template #header>
           <h2>编辑会员</h2>
      </template>
       <div class="div-form" >
          <!-- 会员编辑的表单 -->
          <EditAddForm  :form="form" v-model:editMemberDrawer="editMemberDrawer" type="edit"/>  
         </div>
    </el-drawer>
    <!-- 会员详情 -->
    <el-drawer  v-model="memberDetailDrawer"  direction="rtl" size="50%" >
            <template #header>
                  <h2>会员信息</h2>
             </template>
             <!-- 会员详情的组件 -->
             <MemberInfo :memberMsg="memberMsg"/>
    </el-drawer>

   <!-- 批量导入的抽屉 -->
   <el-drawer v-model="batchExportDrawer"  direction="rtl" size="50%">
        <template #header>
            <h2>会员批量导入</h2>
        </template>
        <BatchExportMember/>

    </el-drawer>        




    </div>
     
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import EditAddForm from './memberSub/EditAddForm.vue';
import MemberBindForm from './memberSub/MemberBindForm.vue';
import MemberInfo from './memberSub/MemberInfo.vue';
import BatchExportMember from './memberSub/BatchExportMember.vue';
import { getMemberInfo, deleteMember } from '@/api/member'
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';

// 原始数据
const originalData = ref([]);
const pageData = reactive({
  pageCurrent: 1,
  pageSize: 3,
  pageTotal: 0, // 默认设置为 0
});

const tableData = ref([]);

onMounted(() => {
  getMemberInfo().then(res => {
        originalData.value = res.data.data;
        pageData.pageTotal = originalData.value.length; // 设置总条数
        updateTableData(); // 更新表格数据
    });
});

// 更新表格数据的函数
const updateTableData = () => {
  const start = (pageData.pageCurrent - 1) * pageData.pageSize;
  const end = start + pageData.pageSize;
  tableData.value = originalData.value.slice(start, end);
};

// 分页处理
const handleCurrentChange = (val) => {
  pageData.pageCurrent = val;
  updateTableData(); // 每次页码变化时更新表格数据
};

// 加载会员数据
const loadMembers = () => {
  getMemberInfo().then(res => {
    console.log(res);
    originalData.value = res.data.data;
    pageData.pageTotal = originalData.value.length;
    updateTableData();
  });
};


// 添加会员的逻辑
const drawer = ref(false);
const direction = ref('rtl');
const active = ref(0);
const form = reactive({
  id: 0,
  name: '',
  tel: '',
  gender: '男',
  birthday: '',
  remark: '',
});

const addMember = () => {
  drawer.value = true; // 打开抽屉
  active.value = 1; // 进度条
  // 清空数据
  form.id = 0;
  form.name = '';
  form.tel = '';
  form.gender = '';
  form.birthday = '';
  form.remark = '';
  console.log('添加会员');
};

// 会员编辑的逻辑
const editMemberDrawer = ref(false);
const memberEdit = (id) => {
  const member = originalData.value.find(member => member.id === id);
  if(member){
    const memberData = JSON.parse(JSON.stringify(member));
    Object.assign(form, {
      id: memberData.id,
      name: memberData.customerName,
      tel: memberData.phone,
      gender: memberData.gender,
      birthday: memberData.birth,
      remark: memberData.note,
    });
  editMemberDrawer.value = true;
 }
};

// 会员详情
const memberDetailDrawer = ref(false);
const memberMsg = reactive({
  id: 0,
  customerName: '',
  phone: '',
  gender: '0',
  birth: '',
  note: '',
});

const memberDetail = (row) => {
  console.log("row:",row);
  Object.assign(memberMsg, row);
  console.log("memberMsg",memberMsg);
  memberDetailDrawer.value = true;

};

// 注销会员
// 注销会员
const cancelMember = (row) => {
  ElMessageBox.confirm('确定注销会员吗?', '注销会员', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        // 调用后台接口注销会员
        const response = await deleteMember(row);
        loadMembers(); // 重新加载会员数据
        if (response.status === 200) {
          ElMessage({
            type: 'success',
            message: '注销成功',
          });
        } else {
          ElMessage({
            type: 'error',
            message: '注销失败',
          });
        }
      } catch (error) {
        console.error('注销会员失败:', error);
        ElMessage({
          type: 'error',
          message: '注销会员请求出错',
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '暂时不注销',
      });
    });
};
// 批量导入
const batchExportDrawer = ref(false);
const batchExport = () => {
  console.log('批量导入');
  batchExportDrawer.value = true;
};
</script>
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
}
.handle-input {
	width: 220px;
}
.mr10 {
	margin-right: 10px;
}
.w50{
    width: 45%;
}
//步骤条的样式
.div-step{
    width: 100%; 
    height: 120px;
    text-align: center;
}
//表单的样式
.div-form{
    text-align: center; 
    width: 90%;
    margin-left: 20px;
}
//完成注册的样式
.div-formFinish{
    color:#676A6C; 
    background-color: #eee;
    font-size: 45px; 
    height: 120px;
    text-align: center;
    padding: 20px auto;
}
//详情页 描述列表的 样式
.detail-des{
    margin:10px 20px;
}
//按钮样式 
.btn-opt{
    font-size: 13px;
    .el-button{
        margin-left: 3px;
        font-size: 13px;
        padding: 1px 6px;
    }
}

.mt20{
    margin-top: 20px;
}

</style>